
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>每日一键助手</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>每日一键助手</h1>
      <p class="subtitle">点击开始今天的任务</p>
    </header>
    
    <main>
      <div class="stats">
        <div class="stat-item">
          <span class="stat-label">今日完成</span>
          <span class="stat-value" id="completed-count">0</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">总任务数</span>
          <span class="stat-value" id="total-count">0</span>
        </div>
      </div>
      
      <button id="execute-btn" class="execute-btn">
        <span class="btn-icon">🚀</span>
        <span class="btn-text">开始今日任务</span>
      </button>
      
      <div class="progress-container" id="progress-container" style="display: none;">
        <div class="progress-bar">
          <div class="progress-fill" id="progress-fill"></div>
        </div>
        <span class="progress-text" id="progress-text">0/0</span>
      </div>
      
      <div class="task-list" id="task-list">
        <!-- 任务列表将在这里动态生成 -->
      </div>
    </main>
    
    <footer>
      <button id="settings-btn" class="settings-btn">
        <span>⚙️</span> 设置
      </button>
      <button id="reset-btn" class="reset-btn">
        <span>🔄</span> 重置
      </button>
    </footer>
  </div>
  
  <!-- 设置模态框 -->
  <div id="settings-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h2>任务设置</h2>
        <button id="close-modal" class="close-btn">×</button>
      </div>
      <div class="modal-body">
        <div class="task-form">
          <h3>添加新任务</h3>
          <select id="task-type">
            <option value="open-url">打开网页</option>
            <option value="fill-form">填写表单</option>
            <option value="click-element">点击元素</option>
            <option value="custom-script">自定义脚本</option>
          </select>
          <input type="text" id="task-name" placeholder="任务名称">
          <input type="text" id="task-target" placeholder="目标URL或选择器">
          <textarea id="task-value" placeholder="要填写的值或脚本内容" rows="3"></textarea>
          <button id="add-task" class="add-btn">添加任务</button>
        </div>
        
        <div class="task-list-editor">
          <h3>当前任务列表</h3>
          <ul id="editable-task-list"></ul>
        </div>
      </div>
    </div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>
